.modal-content {
	position: absolute;
	width: 40rem;
	height: 20rem;
	padding: 2rem;
	background-color: #fff;
	border-radius: .5rem;
	box-shadow: 0 1px 10px 1px rgba(#000, .2);
}

.modal-animation {
	&-appear {
		// opacity: 0;
		transform: translate3d(0, -4rem, 0);
		transition: transform .3s ease-out;

		&-active {
			// opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	&-exit {
		opacity: 1;
		transition: opacity .3s ease;

		&-active {
			opacity: 0;
		}
	}
}

.transition-fade {
	&-enter {
		opacity: 0;
		transform: scale3d(.8, .8, 1);

		&-active {
			transform: scale3d(1, 1, 1);
			opacity: 1;
			transition: all .3s ease;
		}
	}

	&-exit {
		opacity: 1;

		&-active {
			opacity: 0;
			transition: all .3s ease;
		}
	}
}

.test-box {
	@include truncation;
	padding: $spacing-scale-5;
	// margin: $spacing-scale-3;
	background-color: $deep-orange-lighten-3;
	border: 1px solid $deep-orange-darken-4;
}
